<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/index.css">
    <title>原生分页</title>

</head>
<body>
<div id="app" >
    <el-form :inline="true" :model="findForm" ref="findform" style="margin-top: 10px"
              size="mini" label-width="80px">
        <el-form-item label="姓名">
            <el-input v-model="findForm.name" prefix-icon="el-icon-search" @keyup.enter.native="getData('find')"
                      @clear="getData('find')" :clearable="true" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" icon="el-icon-search plain" @click="getData('find')">查询</el-button>
        </el-form-item>
     
    </el-form>
    <!--显示 table-->
    <el-table :data="tableData" style="width: 100%" height="500" >
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column label="权限">
            <template #default="{ row }">
                <span v-for="permission in row.permissions" :key="permission.id">{{ permission.name }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button type="text" @click="showEditRoleDialog(row)">编辑</el-button>
                <el-button type="text" @click="deleteRole(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChang"
            :current-page=pageNum
            :page-sizes=pageList
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=pageTotal>
    </el-pagination>
</div>
</body>

<script src="../js/axios.js"></script>
<script src="../js/comm.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/element.js"></script>
<script src="../js/util.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                findForm: {
                    name:''
                },
                tableData: [],
                loading: false,
                pageList:[5, 10, 15],
                pageSize:5,
                pageNum:0,
                pageTotal:0,
                sort:'id',
                order:'asc',
            }
        },
        methods: {
            getData(v) {
                if (v=='find')  //点【查询】时，要从第一页开始
                    this.pageNum=1

                this.loading=true
                axios.post('/GetListData', {
                    nr:this.findForm.name,
                    page:this.pageNum,
                    size:this.pageSize,
                    sort:this.sort,
                    order:this.order,
                }).then((res) => {
                    if (res.data.code==200) {
                        this.loading=false
                        this.pageTotal=res.data.total
                        this.tableData=res.data.data
                    }
                });
            },
            handleSizeChange(val){
                this.pageSize=val
                this.tableData=[]
                this.getData()
            },
            handleCurrentChang(val){
                this.pageNum=val
                this.tableData=[]
                this.getData()
            },
            sort_change(column, prop, order){
                this.sort=column.prop
                this.order=column.order=="descending"?"DESC":"ASC"
                this.getData()
            },
        },
        mounted(){
            this.getData()
        }
    })
</script>
</html>